import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_hx/services/app_theme_services.dart';
import 'package:flutter_hx/theme/font_size.dart';
import 'package:get/get.dart';

import 'pay_password_logic.dart';

class PayPasswordPage extends GetView<PayPasswordLogic> {
  const PayPasswordPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFF7F8FA),
      appBar: AppBar(
        backgroundColor: Colors.white,
        elevation: 0,
        automaticallyImplyLeading: true,
        iconTheme: const IconThemeData(color: Colors.black),
        centerTitle: true,
        title: Text("设置支付密码", style: AppThemeServices.textTheme.appBarTitle),
      ),
      body: GetBuilder<PayPasswordLogic>(builder: (logic) {
        return Stack(
          children: [
            Column(
              children: [
                const SizedBox(
                  height: 10,
                ),
                Container(
                  padding: const EdgeInsets.symmetric(horizontal: 10),
                  color: Colors.white,
                  child: Column(
                    children: [
                      _payPassInput(
                          label: "设置支付密码",
                          placeholder: "请输入支付密码",
                          textInputFormatterList: [
                            LengthLimitingTextInputFormatter(12)
                          ],
                          onChanged: (v) => controller.pass = v),
                      Container(
                        height: 0.5,
                        color: const Color(0xFFF2F2F2),
                      ),
                      _payPassInput(
                          label: "确认支付密码",
                          placeholder: "请确认支付密码",
                          textInputFormatterList: [
                            LengthLimitingTextInputFormatter(12)
                          ],
                          onChanged: (v) => controller.confirmPass = v),
                    ],
                  ),
                ),
                const SizedBox(
                  height: 10,
                ),
                Container(
                  padding: const EdgeInsets.symmetric(horizontal: 10),
                  color: Colors.white,
                  child: _smsInput(
                      placeholder: "请输入验证码",
                      label: "输入验证码",
                      countDown: controller.smsCountDown,
                      locked: controller.smsLock,
                      onChanged: (v) => controller.verifyCode = v,
                      onSendSms: () => controller.getSmsCode()),
                ),
              ],
            ),
            Positioned(
                bottom: 20,
                child: SizedBox(
                  width: Get.width,
                  child: InkWell(
                    onTap: () => controller.savePayPassword(),
                    child: GetBuilder<PayPasswordLogic>(builder: (logic) {
                      return Container(
                        margin: const EdgeInsets.symmetric(horizontal: 10),
                        decoration: BoxDecoration(
                            color: controller.goodToSave
                                ? const Color(0xFF00C3B3)
                                : AppThemeServices.appColors.disabled,
                            borderRadius: BorderRadius.circular(45)),
                        height: 43,
                        child: const Center(
                          child: Text(
                            "确定",
                            style: TextStyle(
                                fontSize: FontSize.pt15, color: Colors.white),
                            textAlign: TextAlign.center,
                          ),
                        ),
                      );
                    }),
                  ),
                ))
          ],
        );
      }),
    );
  }

  ///验证码
  Widget _smsInput({
    required String label,
    required String placeholder,
    Function(String v)? onChanged,
    Function? onSendSms,
    List<TextInputFormatter>? textInputFormatterList,
    required int countDown,
    required bool locked,
  }) {
    return SizedBox(
      height: 48,
      child: Row(
        children: [
          ConstrainedBox(
            constraints: const BoxConstraints(minWidth: 109),
            child: Text(
              label,
              style: const TextStyle(
                  fontSize: FontSize.pt13, color: Color(0xFF323233)),
            ),
          ),
          Expanded(
            child: TextField(
              obscureText: true,
              onChanged: (v) => onChanged?.call(v),
              style: const TextStyle(fontSize: FontSize.pt13)
                  .copyWith(color: const Color(0xFF323233)),
              inputFormatters: textInputFormatterList,
              decoration: InputDecoration(
                  hintText: placeholder,
                  border: InputBorder.none,
                  hintStyle: const TextStyle(fontSize: FontSize.pt13)
                      .copyWith(color: const Color.fromRGBO(150, 151, 153, 1))),
            ),
          ),
          InkWell(
            onTap: () => onSendSms?.call(),
            child: Text(
              locked ? "${countDown}s" : "获取验证码",
              style: const TextStyle(
                  color: Color(0xFF00C3B3), fontSize: FontSize.pt13),
            ),
          )
        ],
      ),
    );
  }

  ///支付密码输入
  Widget _payPassInput({
    required String label,
    required String placeholder,
    // int? maxLength,
    Function(String v)? onChanged,
    List<TextInputFormatter>? textInputFormatterList,
  }) {
    return SizedBox(
      height: 48,
      child: Row(
        children: [
          ConstrainedBox(
            constraints: const BoxConstraints(minWidth: 109),
            child: Text(
              label,
              style: const TextStyle(
                  fontSize: FontSize.pt13, color: Color(0xFF323233)),
            ),
          ),
          Expanded(
            child: TextField(
              obscureText: true,
              // maxLength: maxLength,
              onChanged: (v) => onChanged?.call(v),
              style: const TextStyle(fontSize: FontSize.pt13)
                  .copyWith(color: const Color(0xFF323233)),
              inputFormatters: textInputFormatterList,
              decoration: InputDecoration(
                  hintText: placeholder,
                  border: InputBorder.none,
                  hintStyle: const TextStyle(fontSize: FontSize.pt13)
                      .copyWith(color: const Color.fromRGBO(150, 151, 153, 1))),
            ),
          )
        ],
      ),
    );
  }
}
